<template>
	<transition>
		<div class="search">
			<header>
				<div class="map">
					杭州<span>﹀</span>
				</div>
				<div class="search-main">
					<button></button>
					<input type="text" placeholder="请输入你想要搜索的产品"></input>
				</div>
				<div class="pass" @click="cancle">
					取消
				</div>
			</header>
			<div class="search-title" v-for="i in search" :key="i.id">
				<p>
					<img :src="i.img_src"/>
					<span v-text="i.title"></span>
				</p>
				<p>
					<em>/{{i.txt}}/</em>
					<i></i>
				</p>
				<ul>
					<li v-for="j in i.list" v-text="j"></li>
				</ul>
			</div>
		</div>
	</transition>
</template>

<script>
	import axios from "axios"
	export default{
		data(){
			return {
				search:[]
			}
		},
		mounted(){
			axios.get("/api/search.json").
			then(res => {
				this.search = res.data.data.search;
			})
		},
		methods:{
			cancle(){
				this.$router.go(-1);	
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.v-enter
		transform: translate3d(100%,0,0)
	.v-enter-active,.v-leave-active
		transition: all .3s;
	.v-leave-to
		transform: translate3d(-100%,0,0)
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	.search
		width: 100%;
		header
			width: 100%;
			height: 0.88rem;
			overflow: hidden;
			background: #559ae3;
			display: flex;
			column-count: 3;
			align-items: center;
			justify-content: space-between;
			.map
				text-align: center;
				font-size: 0.28rem;
				color: #fff;
				display: flex;
				align-items: center;
				margin-left: 0.2rem;
				position: relative;
				span
					position: absolute;
					top: 0.06rem;
					right: -0.36rem;
			.search-main
				width: 5rem;
				height: 0.6rem;
				background: #fff;
				border-radius: 0.4rem;
				button
					background: #fff;
					border: none;
					width: 0.8rem;
					height: 0.6rem;
					float: left;
					border-radius: 0.4rem 0 0 0.4rem;
					background: url(../../../static/images/home_3.gif)no-repeat center;
					background-size: 0.4rem 0.4rem;
				input
					width: 4.2rem;
					height: 0.6rem;
					line-height: 0.6rem;
					overflow: hidden;
					font-size: 0.24rem;
					color: #000;
					float: left;
					border: none;
					border-radius: 0 0.4rem 0.4rem 0;	
					padding: 0;
			.pass
				margin-right: 0.2rem;
				font-size: 0.28rem;
				color: #fff;
		.search-title
			width: 7.02rem;
			margin: 0 auto;
			padding: 0.3rem 0;
			p
				overflow: hidden;
				margin-bottom: 0;
				img
					width: 0.28rem;
					height: 0.32rem;
				span
					font-size: 0.28rem;
					color: #515151;
				em
					font-size: 0.2rem;
					color: #515151;
					float: left;
				i
					display: block;
					float: left;
					width: 5rem;
					border-bottom: 0.01rem dotted #515151;
					margin: 0.18rem 0 0 0.2rem;
			ul
				width: 100%;
				display: flex;
				flex-flow: wrap;
				overflow: hidden;
				li
					border: 0.01rem solid #515151;
					font-size: 0.28rem;
					color: #515151;
					width: 1.72rem;
					text-align: center;
					border-radius: 0.1rem;
					margin-bottom: 0.2rem;
					margin-right: 0.62rem;
</style>